<template>
	<div class='h-100 relative'>
		<div class='absolute middle' style="left: 60px;">
			<div class='relative'>
				<svg 
				width="353.5px" height="130.5px">
				<path fill-rule="evenodd"  stroke="rgb(221, 221, 221)" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
				d="M14.657,0.500 L338.355,0.500 C347.293,0.500 353.555,6.940 352.354,14.786 L336.631,117.582 C335.649,124.005 328.416,129.154 320.465,129.154 L32.546,129.154 C24.596,129.154 17.363,124.005 16.381,117.582 L0.657,14.786 C-0.543,6.940 5.718,0.500 14.657,0.500 Z"/>
				</svg>
				<div class='absolute xy text-center'>
					<div class='color-333333 f-18'>{{visits}}</div>
					<div class='m-t-10'>访问人数（人）</div>
				</div>
			</div>
			<div class='relative m-t-20 text-center'>
				<svg 
				width="309.5px" height="101.5px">
				<path fill-rule="evenodd"  stroke="rgb(221, 221, 221)" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
				d="M13.508,1.449 L295.504,1.449 C303.291,1.449 308.856,6.340 307.943,12.309 L295.834,91.474 C295.068,96.481 288.757,100.500 281.731,100.500 L27.281,100.500 C20.254,100.500 13.944,96.481 13.178,91.474 L1.069,12.309 C0.156,6.340 5.720,1.449 13.508,1.449 Z"/>
				</svg>
				<div class='absolute xy text-center'>
					<div class='color-333333 f-18'>{{orders}}</div>
					<div class='m-t-10'>成功订单（笔）</div>
				</div>
			</div>
		</div>
		
		<div class='absolute middle text-center' style='right:150px;'>
			<div style='font-size:24px;'>访问转化率</div>
			<div class='color-333333 m-t-30' style="font-size:36px;">{{rate}}%</div>
			<div class='m-t-30 f-18' :class='{"color-67c23a" : incr < 0, "color-f56c6c" : incr > 0}'>{{Math.abs(incr)}}%<span class='iconfont f-18' :class='{"icon-arror-down" : incr < 0, "icon-arror-up" : incr > 0}'></span></div>
		</div>
	</div>
</template>

<script>
	export default {
		props : {
			visits : {
				type : Number,
				default : 0
			},
			
			orders : {
				type : Number,
				default : 0
			},
			
			rate : {
				type : String,
				default : 0
			},
			
			incr : {
				type : String,
				default : 0
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang='less' scoped>
	
</style>
